<template>
  <view class="container">
    <view class="rule-card">
      <view class="rule-header">
        <text class="rule-title">积分规则</text>
      </view>
      <view class="rule-content">
        <view class="rule-section">
          <text class="section-title">积分获取</text>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">每消费1元获得1积分</text>
          </view>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">首次下单额外奖励10积分</text>
          </view>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">评价订单奖励5积分</text>
          </view>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">每日签到奖励2积分</text>
          </view>
        </view>
        
        <view class="rule-section">
          <text class="section-title">积分使用</text>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">100积分可抵扣1元</text>
          </view>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">积分可在下单时选择使用</text>
          </view>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">积分可兑换优惠券</text>
          </view>
        </view>
        
        <view class="rule-section">
          <text class="section-title">积分有效期</text>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">积分有效期为获得之日起1年</text>
          </view>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">过期积分将自动失效</text>
          </view>
        </view>
        
        <view class="rule-section">
          <text class="section-title">其他说明</text>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">积分不可转让、不可提现</text>
          </view>
          <view class="rule-item">
            <text class="item-dot">•</text>
            <text class="item-text">最终解释权归平台所有</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-image: linear-gradient(135deg, #fff8f8 0%, #fff5f7 50%, #fff8fa 100%);
  padding: 30rpx;
}

.rule-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .rule-header {
    margin-bottom: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    padding-bottom: 20rpx;
    
    .rule-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      position: relative;
      padding-left: 24rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 32rpx;
        background: linear-gradient(to bottom, #ff9a9e, #ff6b6b);
        border-radius: 4rpx;
      }
    }
  }
  
  .rule-content {
    .rule-section {
      margin-bottom: 40rpx;
      
      .section-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 20rpx;
        display: block;
      }
      
      .rule-item {
        display: flex;
        margin-bottom: 16rpx;
        
        .item-dot {
          color: #ff6b6b;
          font-size: 32rpx;
          line-height: 1.5;
          margin-right: 12rpx;
        }
        
        .item-text {
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }
}
</style>